import * as echarts from "echarts";
import AgeNum from "./components/Map/JSONsource/AgeNum.json";
import TypeNum from "./components/Map/JSONsource/TypeNum.json";
// 各区适老化改造申请数量/百分比
// #region
export const ApplyNum = (data = []) => {
  if (!data) {
    data = [
      { name: "1", value: 123 },
      { name: "2", value: 345 },
      { name: "3", value: 124 },
      { name: "4", value: 462 },
      { name: "5", value: 234 },
    ];
  }

  let nameList = data.map((el) => el.name || el.label);
  let valueList = data.map((el) => el.value);
  let option = {
    dataZoom: [
      {
        // 设置滚动条的隐藏或显示
        show: false,
        // 设置类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: "rgb(19, 63, 100)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 6,
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 滚动条高度
        width: 8,
        // 滚动条显示位置
        height: "80%",
        // 距离右边
        right: 3,
        // 控制手柄的尺寸
        handleSize: 0,
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 组件离容器上侧的距离
        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
        top: "middle",
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标移动能否触发平移
        moveOnMouseMove: true,
        // 鼠标滚轮能否触发平移
        moveOnMouseWheel: true,
      },
    ],
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "10%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        let total = valueList.reduce((sum, b) => sum + b);
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          " 百分比: " +
          Number(
            ((params[0].value.toFixed(4) / total) * 100).toFixed(2)
          ).toLocaleString() +
          "%" +
          "<br/>"
        );
      },
    },
    // backgroundColor: 'rgb(20,28,52)',
    xAxis: {
      show: true,
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(26, 32, 43, 1)",
        },
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: nameList,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
          },
          formatter: function (value) {
            if (value >= 10000) {
              return (value / 10000).toLocaleString() + "万";
            } else {
              return value.toLocaleString();
            }
          },
        },
        data: valueList,
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            // barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(70, 170, 255, 0.2)",
              },
              {
                offset: 1,
                color: "rgba(70, 170, 255, 1)",
              },
            ]),
          },
        },
        barWidth: 6,
        data: valueList,
      },
    ],
  };
  return option;
};
// #endregion
// 适老化改造安装情况分析图
export const InstallStatus = (data) => {
  let option = {
    pieData: [
      {
        name: "一级",
        value: 10,
        itemStyle: {
          color: "rgba(0, 168, 255, 100)",
        },
      },
      {
        name: "二级",
        value: 39,
        itemStyle: {
          color: "rgba(0, 215, 233, 1)",
        },
      },
    ],
    legend: {
      show: false,
    },
  };
  return option;
};

// 年龄段人数分布/占比
export const AgeNumDistribution = (data = []) => {
  var trafficWay = data;
  trafficWay = [
    {
      name: "70-79周岁",
      value: 20,
    },
    {
      name: "60-69周岁",
      value: 10,
    },
    {
      name: "50-59周岁",
      value: 30,
    },
    {
      name: "100周岁以上",
      value: 40,
    },
  ];
  var data = [];
  var color = [
    "rgba(114, 253, 255, 100)",
    "rgba(57, 207, 255, 100)",
    "rgba(255, 202, 101, 100)",
    "rgba(72, 255, 167, 100)",
  ];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 0,
          borderColor: color[i],
          shadowColor: color[i],
        },
      },
      labelLine: {
        lineStyle: {
          width: 1,
          color: "#fff",
        },
      },
    });
  }
  const getRich = () => {
    let result = {};
    color.forEach((v, i) => {
      result[`hr${i}`] = {
        backgroundColor: color[i],
        borderRadius: 3,
        width: 3,
        height: 3,
        padding: [3, 3, 0, -12],
      };
      result[`a${i}`] = {
        color: color[i],
        backgroundColor: "transparent",
        fontSize: 12,
      };
      result[`color${i}`] = {
        color: color[i],
        fontSize: 12,
      };
    });
    result[`white`] = {
      color: "#fff",
    };
    return result;
  };
  var seriesOption = [
    {
      type: "pie",
      clockWise: false,
      radius: [65, 75],
      hoverAnimation: false,
      padAngle: 10, // 区域间距
      selectedMode: "single",
      selectedOffset: 0,
      itemStyle: {
        normal: {
          // borderRadius: 0, //区域圆角
          label: {
            show: true,
            position: "outside",
            color: "#ddd",
            formatter: function (params) {
              let percent = "0";
              var total = 0;
              const index = params.dataIndex;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }

              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return [
                  `{a${index}|}{white|${params.name}:}`,
                  `{hr${index}|}`,
                  `{color${index}|${params.value}}`,
                ].join("\n");
              } else {
                return "";
              }
            },
            rich: getRich(),
          },
          labelLine: {
            length: 10,
            length2: 10,
            show: true,
            color: "#fff",
          },
        },
      },
      data: data,
    },
  ];
  let option = {
    tooltip: {
      trigger: "item",
      show: true,
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>占比：{d}%",
    },
    // backgroundColor: '#0A2E5D',
    color: color,
    title: {
      text: "",
      top: "48%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 22,
        fontWeight: "400",
      },
    },
    // graphic: {
    //   elements: [
    //     {
    //       type: "image",
    //       z: 3,
    //       style: {
    //         image: AgeNum.src,
    //         width: 200,
    //         height: 200,
    //       },
    //       left: "center",
    //       top: "center",
    //       position: [100, 100],
    //     },
    //   ],
    // },
    // legend: {
    //     show:false,
    //     icon: "circle",
    //     orient: 'horizontal',
    //     // x: 'left',
    //     data:['火车','飞机','客车','轮渡'],
    //     right: 340,
    //     bottom: 150,
    //     align: 'right',
    //     textStyle: {
    //       color: "#fff"
    //     },
    //     itemGap:20
    // },
    toolbox: {
      show: false,
    },
    series: seriesOption,
  };
  return option;
};
// 老人类别人数分布/占比
export const TypeNumDistribution = () => {
  //颜色16进制换算rgba,添加透明度
  function hexToRgba(hex, opacity) {
    return (
      "rgba(" +
      parseInt("0x" + hex.slice(1, 3)) +
      "," +
      parseInt("0x" + hex.slice(3, 5)) +
      "," +
      parseInt("0x" + hex.slice(5, 7)) +
      "," +
      opacity +
      ")"
    );
  }

  let backgroundColor = "rgba(0,0,0,1)";
  // 数据
  let chartdata = [
    {
      name: "独居空巢",
      value: 30,
    },
    {
      name: "失能险",
      value: 50,
    },
    {
      name: "百岁老人",
      value: 80,
    },
    {
      name: "80周岁以上",
      value: 90,
    },
  ];
  let radius = ["60%", "65%"];
  // 颜色系列
  let color = ["#F78D6D", "#75FBFE", "#05AFEA", "#FEFEFE"];
  let labelshow = true;
  let centerimg = true;
  let lineshow = false;
  let color1 = [],
    color2 = [],
    color3 = [];
  // 设置每层圆环颜色和添加间隔的透明色
  color.forEach((item) => {
    color1.push(item);
    color2.push(hexToRgba(item, 0.2));
  });
  let data1 = [];
  let sum = 0;
  // 根据总值设置间隔值大小
  // chartdata.forEach((item) => {
  //   sum += Number(item.value);
  // });
  // 给每个数据后添加特定的透明的数据形成间隔
  chartdata.forEach((item, index) => {
    if (item.value !== 0) {
      data1.push(item);
    }
  });
  // 每层圆环大小
  let radius2 = [
    Number(radius[1].split("%")[0]) - 15 + "%",
    Number(radius[1].split("%")[0]) + 5 + "%",
  ];
  let radius3 = [
    Number(radius[1].split("%")[0]) + 4 + "%",
    Number(radius[1].split("%")[0]) + 8 + "%",
  ];
  let rich = {
    total: {
      color: "#51BFED",
      fontSize: 20,
      fontWeight: 700,
      align: "center",
    },
  };
  const handleRich = () => {
    let result = {};
    color.forEach((el, index) => {
      // 顺序时0，2，4，6
      result[`color${index * 2}`] = {
        color: el,
      };
    });
    return result;
  };
  let option = {
    title: {
      text: "老年人人数",
      left: "center",
      top: "30%",
      padding: [24, 0],
      textStyle: {
        color: "#fff",
        fontSize: 18,
        align: "center",
      },
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0; //各科正确率总和
        var averagePercent; //综合正确率
        chartdata.forEach(function (value, index, array) {
          total += value.value;
        });
        return "{total|" + total + "}";
      },
      data: [chartdata[0].name],
      // itemGap: 50,
      left: "center",
      top: "50%",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        rich: rich,
      },
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      containLabel: true,
    },
    tooltip: {
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>占比：{d}%",
    },
    series: [
      // 最外层圆环
      {
        type: "pie",
        radius: radius3,
        center: ["50%", "50%"],
        padAngle: 5,
        hoverAnimation: false,
        startAngle: 90,
        selectedMode: "single",
        selectedOffset: 0,
        itemStyle: {
          normal: {
            color: (params) => {
              return color[params.dataIndex];
            },
          },
        },
        label: {
          color: "#fff",
          show: true,
          position: "outside",
          formatter: function (params) {
            let percent = "0";
            var total = 0;
            let index = params.dataIndex;
            for (var i = 0; i < chartdata.length; i++) {
              total += chartdata[i].value;
            }

            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return (
                params.name + "\n" + "\n" + `{color${index}|${params.value}}`
              );
            } else {
              return "";
            }
          },
          align: "left",
          rich: handleRich(),
          // padding: [0, -50, 10, -60],
        },
        labelLine: {
          show: true,
          length: 12,
          length2: 12,
          lineStyle: {
            // color: '#fff',
            // width: 2,
          },
        },
        data: data1,
        z: 666,
      },
      {
        type: "pie",
        radius: radius2,
        center: ["50%", "50%"],
        hoverAnimation: false,
        startAngle: 90,
        selectedMode: "single",
        selectedOffset: 0,
        padAngle: 5,
        itemStyle: {
          normal: {
            color: (params) => {
              return color2[params.dataIndex];
            },
          },
        },
        label: {
          show: false,
          formatter: "{b}<br/>占比：{d}%",
        },
        data: data1,
        z: 666,
      },
    ],
    // graphic: {
    //   elements: [
    //     {
    //       type: "image",
    //       z: 3,
    //       style: {
    //         image: TypeNum.src,
    //         width: 220,
    //         height: 178,
    //       },
    //       left: "center",
    //       top: "center",
    //       position: [100, 100],
    //     },
    //   ],
    // },
  };
  return option;
};
// 各区机构、设施入住统计/覆盖率
export const StayStatistics = (data = []) => {
  if (!data) {
    data = [
      { name: "1", value: 123 },
      { name: "2", value: 345 },
      { name: "3", value: 124 },
      { name: "4", value: 462 },
      { name: "5", value: 234 },
    ];
  }

  let nameList = data.map((el) => el.name || el.label);
  let valueList = data.map((el) => el.value);
  let option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        let total = valueList.reduce((sum, b) => sum + b);
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          " 覆盖率: " +
          Number(
            ((params[0].value.toFixed(4) / total) * 100).toFixed(2)
          ).toLocaleString() +
          " %<br/>"
        );
      },
    },
    // backgroundColor: 'rgb(20,28,52)',
    xAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: nameList,
      },
    ],
    yAxis: {
      show: true,
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(26, 32, 43, 1)",
        },
      },
    },
    series: [
      {
        name: "金额",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(62, 148, 244, 1)",
              },
              {
                offset: 1,
                color: "rgba(16, 82, 182, 1)",
              },
            ]),
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "white",
                fontSize: 12,
              },
            },
          },
        },
        barWidth: 9,
        data: valueList,
      },
    ],
  };
  return option;
};

// 顶部的悬浮折线图
export const TopLine = (data = []) => {
  data = [
    { name: "1", value: 123 },
    { name: "2", value: 345 },
    { name: "3", value: 124 },
    { name: "4", value: 462 },
    { name: "5", value: 234 },
  ];
  let nameList = data.map((el) => el.name);
  let valueList = data.map((el) => el.value);
  let option = {
    grid: {
      top: 40,
      bottom: 20,
      right: 20,
      left: 40,
      height: "70%",
      width: "90%",
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      formatter: (params) => {
        let total = valueList.reduce((sum, b) => sum + b);
        return (
          params[0].name +
          "<br/>" +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          " 占比: " +
          Number(
            (
              ((((params[0].value.toFixed(4) * 1000) / 1000 / total) * 1000) /
                1000) *
              100
            ).toFixed(2)
          ).toLocaleString() +
          " %<br/>"
        );
      },
    },
    xAxis: {
      type: "category",
      axisLabel: {
        show: true,
        color: "#fff",
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      data: nameList,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#516575",
        },
      },
      axisLabel: {
        show: true,
        color: "#fff",
      },
    },
    series: [
      {
        data: valueList,
        type: "line",
        symbol: "none",
        itemStyle: {
          normal: {
            color: "#61A4DB",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "white",
                fontSize: 12,
              },
            },
          },
        },
        lineStyle: {
          normal: {
            width: 2,
            shadowColor: "#61A4DB",
            shadowBlur: 5,
          },
        },
        // symbolSize:[8,8]
      },
    ],
  };
  return option;
};
